@import

    "../core/mixin",
    "../core/setting";

/* 三等分 */
.ui-grid {
    padding-left: $wrap-padding;
    padding-right: 10px;
    @media (max-width: 320px) {
        padding-left: $wrap-padding-s;
        padding-right: 5px;
    }
    overflow: hidden;
    padding-top: 10px;
    li {
        padding-right: 5px;
        padding-bottom: 10px;
        float: left;
        position: relative;
        -webkit-box-sizing: border-box;
    }
}

.ui-grid-trisect,
.ui-grid-halve {
    @extend .ui-grid;
}

.ui-grid-trisect>li {
    width: 33.3333%;
}

.ui-grid-trisect-img {
    padding-top: 149.47%;
}

.ui-grid-trisect h4 {
    position: relative;
    margin: 7px 0 3px;
}

.ui-grid-trisect h4 span {
    display: inline-block;
    margin-left: 12px;
    color: $txt-info;
}


/* 二等分 */

.ui-grid-halve>li {
    width: 50%;
}

.ui-grid-halve-img {
    padding-top: 55.17%;
}

.ui-grid-trisect-img,
.ui-grid-halve-img {
    @include placehold-img;
    img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    width: 100%;
    &.active {
        opacity: .5;
    }
}

.ui-row {
    display: block;
    margin-right: -$wrap-padding;
    margin-left: -$wrap-padding;

    @include clearfix;
}

.ui-col {
    @extend .pull-left;
    box-sizing: border-box;
    width: 100%;
}

.ui-col-8 {
    @extend .pull-left;
    width: 8%;
}

.ui-col-10 {
    @extend .pull-left;
    width: 10%;
}

.ui-col-20 {
    @extend .pull-left;
    width: 20%;
}

.ui-col-25 {
    @extend .pull-left;
    width: 25%;
}

.ui-col-33 {
    @extend .pull-left;
    width: 33.3333%;
}

.ui-col-40 {
    @extend .pull-left;
    width: 40%;
}

.ui-col-50 {
    @extend .pull-left;
    width: 50%;
}

.ui-col-60 {
    @extend .pull-left;
    width: 60%;
}

.ui-col-67 {
    @extend .pull-left;
    width: 66.6666%;
}

.ui-col-75 {
    @extend .pull-left;
    width: 75%;
}

.ui-col-80 {
    float: left;
    width: 80%;
}

.ui-col-90 {
    @extend .pull-left;
    width: 90%;
}

.ui-row-flex {
    display: -webkit-box;
    -webkit-box-sizing: border-box;
    .ui-col {
        float: none;
        -webkit-box-flex: 1;
        width: 0;
    }
    .ui-col-2 {
        -webkit-box-flex: 2;
    }
    .ui-col-3 {
        -webkit-box-flex: 3;
    }
    .ui-col-4 {
        -webkit-box-flex: 4;
    }
}

.ui-row-flex-ver {
    -webkit-box-orient: vertical;
    .ui-col {
        width: 100%;
        height: 0;
    }
}

